<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1000px;
            height: 600px;
            margin: 100px auto;
        }

        .box .commodity {
            width: 750px;
            height: 600px;
            float: left;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        .box .commodity div {
            width: 160px;
            height: 300px;
            margin-bottom: 20px;
        }

        .box .commodity div img {
            width: 100%;
        }

        .box .commodity div p {
            padding-left: 10px;
        }

        .box .commodity div button {
            width: 100px;
            height: 20px;
            border-radius: 10px;
            text-align: center;
            background-color: red;
            border: none;
            cursor: pointer;
        }

        .box .cart {
            width: 250px;
            height: 600px;
            float: left;
        }

        .box .cart li {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            margin-bottom: 5px;
            background-color: blue;
        }

        .box .cart li img {
            height: 100px;
        }

        .box .cart li button {
            min-width: 15px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 商品展示 -->
        <div class="commodity">

        </div>
        <!-- 购物车 -->
        <div class="cart">
            <h2></h2>
        </div>
    </div>
</body>

</html>
<script>
    // =====================封装面向对象
    class Shopping {
        // 
        constructor(arr, box) {
            this.dom = document.querySelector(box);
            this.data = arr;
            this.index = 0;
            this.id = null;
            this.idarr = { list: [] };
            this.render();
            this.btns = this.dom.querySelectorAll('.commodity button')
            this.btnEle();
            this.obj = this.Sterun();
            this.li = null
            this.button = null

        }
        // ===========渲染商品栏
        render() {
            let str = ``
            str = this.data.map((item) => {
                return `<div>
                <img src="${item.img}">
                <p>${item.name}</p>
                <p>${item.Price}</p>
                <button>加入购物车</button>
                </div>`
            }).join('')
            this.dom.querySelector(".commodity").innerHTML = str
        }
        // ===================渲染购物车栏
        render1() {
            let str1 = ``
            str1 = Object.keys(this.obj).map((key, index) => {
                const item = this.obj[key]
                return `<li>
                                  <input type="checkbox">
                                  <img src="${item.img}" alt="">
                                  <span>${item.Price}</span>
                                  <button>-</button>
                                  <span>${item.id}</span>
                                  <button>+</button>
                                  <button>删除收藏</button>
                                  </li>`
            }).join('')
            this.dom.querySelector('.cart').innerHTML = str1
        }
        // ===========创建加入购物车点击事件

        btnEle() {
            this.btns.forEach((item, index) => {
                item.onclick = (() => {

                    // this.idarr.list.indexOf(this.data[index]) != -1 ? this.data[index].id++ : this.idarr.list.push(this.data[index])
                    // console.log(this.idarr.list);
                    // this.data.forEach((item, index) => {
                    let res = this.data[index]
                    // console.log(index);
                    // this.obj[index] = this.data[index]
                    if (this.obj[index]) {
                        // this.obj[index].id = this.obj[index].id+1 
                        let obj = this.obj[index]
                        obj.id++
                        this.obj[index] = obj
                    } else {
                        res.id = 1
                        console.log(this.obj, res);

                        this.obj[index] = res
                    }
                    // console.log(this.obj, res);

                    // this.obj[index] ? this.obj[index].id++ : this.obj[index] = res && (res.id = 1)

                    // })
                    this.li = this.dom.querySelector('.cart li')
                    this.button = this.dom.querySelectorAll('.cart li button')
                    // this.Click()
                })

            })
        }
        // 点击删除事件，点击添加数量，点击减少数量
        // Click() {
        //     this.li.onclick = function (e) {

        //         if (e.target.nodeName == 'BUTTON') {
        //             let button = [...document.querySelectorAll('.cart li button')]
        //             button[0].onclick = function () {
        //                 if (this.data[index].id === 1) { this.data[index].id = 1 }
        //                 this.data.id--
        //             }
        //             button[1].onclick = function () {
        //                 this.data.id++
        //             }
        //             button[2].onclick = function () {
        //             }
        //         }
        //     }

        // }

        // 监听
        Sterun() {
            return new Proxy({}, {
                set: (target, key, value) => {
                    // console.log(target);
                    target[key] = value
                    // console.log(...arguments);
                    this.render1()
                    return true
                }
            })
        }

    }

    // ====================传数据
    let arr = [
        { name: '高级办公椅', Price: 1000, img: "images/pic1.jpg", id: 1 },
        { name: '高级按摩椅', Price: 100, img: "images/pic2.jpg", id: 1 },
        { name: '高级电动按摩椅', Price: 10, img: "images/pic3.jpg", id: 1 },
        { name: '电动按摩椅', Price: 999, img: "images/pic4.jpg", id: 1 },
        { name: '老板椅', Price: 150, img: "images/pic5.jpg", id: 1 },
        { name: '办公桌', Price: 135, img: "images/pic6.jpg", id: 1 },
        { name: '可降办公椅', Price: 1345, img: "images/pic7.jpg", id: 1 },
        { name: '可降办公桌', Price: 1205, img: "images/pic8.jpg", id: 1 }
    ]
    const box = '.box'
    let Shpp = new Shopping(arr, box)
</script>